<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 节点的优点 -->
<div>我是div</div>
<span>我是span</span>
<ul>
    <li>我是li</li>
    <li>我是li</li>
    <!--我是一个注释-->
    <li>我是li</li>
    <li>我是li4</li>

</ul>
<ol>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
</ol>

<div class="demo">
    <div class="box">
        <span class="code">×</span>
    </div>
</div>

<script>

    // 1.子节点    parentNode (标准)
    var ul = document.querySelector('ul');

    // 返回的子节点包括 元素 | 文本(空格, 换行) | 注释
    // 所以说childNodes 不常用
    // NodeList(11) [text, li, text, li, text, comment, text, li, text, li, text]
    console.log(ul.childNodes);

    // 2. parentNode.children 获取子节点是元素类型  实际开发常用的         !!!
    // HTMLCollection(4) [li, li, li, li]
    console.log(ul.children)

    // 3.parentNode.firstChild 第一个子节点, 不管是文本节点还是元素节点
    console.log(ul.firstChild)
    console.log(ul.lastChild)

    // 4.parentNode.firstElementChild 返回第一个子元素节点
    // firstElementChild 和 lastElementChild 有兼容性问题 IE9以后支持, 所以也不常用
    // console.log(ul.firstElementChild)
    // console.log(ul.lastElementChild)

    // 5.实际开发的写法, 即没有兼容性问题又返回第一个子元素或最后一个子元素     !!!
    // console.log(`ul.children[0]:  ${ul.children[0]}`)
    console.log(ul.children[0]);
    // console.log(`ul.children[ul.childElementCount - 1]:  ${ul.children[ul.childElementCount - 1]}`)
    console.log(ul.children[ul.children.length - 1])
</script>
</body>
</html>
